<template>
	<u-popup mode="left" :show="chooseShow" customStyle="width:100vw">
		<u-overlay :show="overlayShow"></u-overlay>
		<view class="address_choose">
			<view class="choose_top">
				<text>请选择(中国大陆)</text>
				<u-icon name="close-circle-fill" color="#000" size="40rpx" @click="chooseShow = false"></u-icon>
			</view>
			<scroll-view scroll-y="true" class="address_pop_body">
				<view class="add_top">
					<view class="add_top_title" v-for="(item, i) in selData" :key="i" @click="selCate(item, i)">
						<view>
							<b v-show="i <= nowIndex - 2"></b>
						</view>
						<view>{{ item.title }}</view>
					</view>
				</view>
				<view class="choose_body">
					<view class="add_sel">
						<view class="add_sel_p" v-if="level > nowIndex">
							<p v-if="nowIndex == 0">选择省份/地区</p>
							<p v-else-if="nowIndex == 1">选择城市</p>
							<p v-else-if="nowIndex == 2">选择区/县</p>
							<p v-else-if="nowIndex == 3">选择街道/镇</p>
							<p v-else></p>
						</view>
						<view class="add_sel_box" v-if="level > nowIndex">

							<view class="add_sel_box_item" v-for="(item, i) in pinyinArr" :key="i">
								<view>{{ item.letter }}</view>
								<view>
									<p v-for="(add, j) in item.list" :key="j" @click="selBtn(add)">{{ add.title }}</p>
								</view>
							</view>
							<view class="add_sel_box_item" v-show="nowIndex == 3">
								<view></view>
								<view>
									<p @click="selBtn({ id: '', title: '' })">暂不选择</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
export default {
	data() {
		return {
			overlayShow: false,
			selData: [],
			nowIndex: 0,
			pinyinArr: [],
			addressList: [],
			chooseShow: false,
			lat: "",
			lng: "",
		};
	},
	props: {
		/*层级 1 省  2 省市  3 省市区 4 省市区县*/
		level: {
			type: [Number, String],
			default: 4,
		},
		show: {
			type: Boolean,
			default: false,
		},
		is_not: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		chooseShow(old, after) {
			if (old == false) {
				var arr = [];
				this.selData.forEach((item, i) => {
					arr.push(item.title);
				});
				this.overlayShow = false;
				this.$emit("confirm", arr, this.lat, this.lng);
			}
		},
	},
	created() { },
	methods: {
		init() {
			this.overlayShow = false;
			this.selData = [];
			this.nowIndex = 0;
			this.pinyinArr = [
				// {
				// 	"id": "540000000000",
				// 	"title": "西藏自治区",
				// 	"pinyin": "XC",
				// 	"lat": "29.646922",
				// 	"lng": "91.117212"
				// },
				// {
				// 	"id": "520000000000",
				// 	"title": "贵州省",
				// 	"pinyin": "GZ",
				// 	"lat": "26.598194",
				// 	"lng": "106.707410"
				// },
				// {
				// 	"id": "510000000000",
				// 	"title": "四川省",
				// 	"pinyin": "SC",
				// 	"lat": "30.651651",
				// 	"lng": "104.075931"
				// },
				// {
				// 	"id": "530000000000",
				// 	"title": "云南省",
				// 	"pinyin": "YN",
				// 	"lat": "25.045806",
				// 	"lng": "102.710002"
				// },
				// {
				// 	"id": "500000000000",
				// 	"title": "重庆市",
				// 	"pinyin": "CQ",
				// 	"lat": "29.563009",
				// 	"lng": "106.551556"
				// },
				// {
				// 	"id": "460000000000",
				// 	"title": "海南省",
				// 	"pinyin": "HN",
				// 	"lat": "20.017377",
				// 	"lng": "110.349228"
				// },
				// {
				// 	"id": "610000000000",
				// 	"title": "陕西省",
				// 	"pinyin": "SX",
				// 	"lat": "34.265472",
				// 	"lng": "108.954239"
				// },
				// {
				// 	"id": "120000000000",
				// 	"title": "天津市",
				// 	"pinyin": "TJ",
				// 	"lat": "39.084158",
				// 	"lng": "117.200983"
				// },
				// {
				// 	"id": "410000000000",
				// 	"title": "河南省",
				// 	"pinyin": "HN",
				// 	"lat": "34.765515",
				// 	"lng": "113.753602"
				// },
				// {
				// 	"id": "130000000000",
				// 	"title": "河北省",
				// 	"pinyin": "HB",
				// 	"lat": "38.037057",
				// 	"lng": "114.468664"
				// },
				// {
				// 	"id": "650000000000",
				// 	"title": "新疆维吾尔自治区",
				// 	"pinyin": "XJ",
				// 	"lat": "43.793026",
				// 	"lng": "87.627704"
				// },
				// {
				// 	"id": "714401",
				// 	"title": "台湾省",
				// 	"pinyin": "",
				// 	"lat": "",
				// 	"lng": ""
				// },
				// {
				// 	"id": "810000000000",
				// 	"title": "香港特别行政区",
				// 	"pinyin": "",
				// 	"lat": "",
				// 	"lng": ""
				// },
				// {
				// 	"id": "820000000000",
				// 	"title": "澳门特别行政区",
				// 	"pinyin": "",
				// 	"lat": "",
				// 	"lng": ""
				// },
				// {
				// 	"id": "370000000000",
				// 	"title": "山东省",
				// 	"pinyin": "SD",
				// 	"lat": "36.668530",
				// 	"lng": "117.020359"
				// },
				// {
				// 	"id": "310000000000",
				// 	"title": "上海市",
				// 	"pinyin": "SH",
				// 	"lat": "31.230416",
				// 	"lng": "121.473701"
				// },
				// {
				// 	"id": "320000000000",
				// 	"title": "江苏省",
				// 	"pinyin": "JS",
				// 	"lat": "32.061707",
				// 	"lng": "118.763232"
				// },
				// {
				// 	"id": "140000000000",
				// 	"title": "山西省",
				// 	"pinyin": "SX",
				// 	"lat": "37.873531",
				// 	"lng": "112.562398"
				// },
				// {
				// 	"id": "110000000000",
				// 	"title": "北京市",
				// 	"pinyin": "BJ",
				// 	"lat": "39.904030",
				// 	"lng": "116.407526"
				// },
				// {
				// 	"id": "220000000000",
				// 	"title": "吉林省",
				// 	"pinyin": "JL",
				// 	"lat": "43.896536",
				// 	"lng": "125.325990"
				// },
				// {
				// 	"id": "630000000000",
				// 	"title": "青海省",
				// 	"pinyin": "QH",
				// 	"lat": "36.620901",
				// 	"lng": "101.780199"
				// },
				// {
				// 	"id": "640000000000",
				// 	"title": "宁夏回族自治区",
				// 	"pinyin": "NX",
				// 	"lat": "38.471317",
				// 	"lng": "106.258754"
				// },
				// {
				// 	"id": "150000000000",
				// 	"title": "内蒙古自治区",
				// 	"pinyin": "NMG",
				// 	"lat": "40.817498",
				// 	"lng": "111.765617"
				// },
				// {
				// 	"id": "620000000000",
				// 	"title": "甘肃省",
				// 	"pinyin": "GS",
				// 	"lat": "36.059421",
				// 	"lng": "103.826308"
				// },
				// {
				// 	"id": "340000000000",
				// 	"title": "安徽省",
				// 	"pinyin": "AH",
				// 	"lat": "31.861184",
				// 	"lng": "117.284922"
				// },
				// {
				// 	"id": "210000000000",
				// 	"title": "辽宁省",
				// 	"pinyin": "LN",
				// 	"lat": "41.835441",
				// 	"lng": "123.429440"
				// },
				// {
				// 	"id": "360000000000",
				// 	"title": "江西省",
				// 	"pinyin": "JX",
				// 	"lat": "28.675696",
				// 	"lng": "115.909228"
				// },
				// {
				// 	"id": "330000000000",
				// 	"title": "浙江省",
				// 	"pinyin": "ZJ",
				// 	"lat": "30.267446",
				// 	"lng": "120.152791"
				// },
				// {
				// 	"id": "430000000000",
				// 	"title": "湖南省",
				// 	"pinyin": "HN",
				// 	"lat": "28.112444",
				// 	"lng": "112.983810"
				// },
				// {
				// 	"id": "350000000000",
				// 	"title": "福建省",
				// 	"pinyin": "FJ",
				// 	"lat": "26.100779",
				// 	"lng": "119.295144"
				// },
				// {
				// 	"id": "440000000000",
				// 	"title": "广东省",
				// 	"pinyin": "GD",
				// 	"lat": "23.132191",
				// 	"lng": "113.266530"
				// },
				// {
				// 	"id": "450000000000",
				// 	"title": "广西壮族自治区",
				// 	"pinyin": "GX",
				// 	"lat": "22.815478",
				// 	"lng": "108.327546"
				// },
				// {
				// 	"id": "420000000000",
				// 	"title": "湖北省",
				// 	"pinyin": "HB",
				// 	"lat": "30.546498",
				// 	"lng": "114.341861"
				// },
				// {
				// 	"id": "230000000000",
				// 	"title": "黑龙江省",
				// 	"pinyin": "HLJ",
				// 	"lat": "45.742347",
				// 	"lng": "126.661669"
				// }
			];
			this.addressList = [];
			this.chooseShow = true;
			this.getinfo();
		},
		selCate(item, i) {
			this.overlayShow = true;
			this.nowIndex = i;
			var num = this.selData.length - i;
			this.selData.splice(i, num);
			if (this.selData.length > 0) {
				this.getinfo(this.selData[this.selData.length - 1].id);
			} else {
				this.getinfo();
			}
		},
		selBtn(item) {
			this.overlayShow = true;
			if (item.lat > 0 && item.lng > 0) {
				this.lat = item.lat
				this.lng = item.lng
			}
			this.selData.push(item);
			this.addressList = [];
			this.nowIndex++;
			if (Number(this.level) <= this.nowIndex) {
				var arr = [];
				this.selData.forEach((item, i) => {
					arr.push(item.title);
				});
				this.overlayShow = false;
				this.chooseShow = false;
				return;
			} else {
				this.getinfo(item.id);
			}
		},
		getinfo(pid) {
			this.pinyinArr = [];
			var params = {};
			if (pid) {
				params.pid = pid;
			}
			if (this.is_not) {
				params.is_not = 1;
			}
			// this.$api.getConfig.getAddressList(params).then((res) => {
			// 	if (res.result && res.result.length == 0) {
			// 		var arr = [];
			// 		this.selData.forEach((item, i) => {
			// 			arr.push(item.title);
			// 		});
			// 		this.overlayShow = false;
			// 		this.chooseShow = false;
			// 		this.addressList = [];
			// 		this.pinyinArr = [];
			// 		return;
			// 	} else {
			// this.addressList = res.result;
			this.overlayShow = false;
			let arr = [
				{
					"id": "540000000000",
					"title": "西藏自治区",
					"pinyin": "XC",
					"lat": "29.646922",
					"lng": "91.117212"
				},
				{
					"id": "520000000000",
					"title": "贵州省",
					"pinyin": "GZ",
					"lat": "26.598194",
					"lng": "106.707410"
				},
				{
					"id": "510000000000",
					"title": "四川省",
					"pinyin": "SC",
					"lat": "30.651651",
					"lng": "104.075931"
				},
				{
					"id": "530000000000",
					"title": "云南省",
					"pinyin": "YN",
					"lat": "25.045806",
					"lng": "102.710002"
				},
				{
					"id": "500000000000",
					"title": "重庆市",
					"pinyin": "CQ",
					"lat": "29.563009",
					"lng": "106.551556"
				},
				{
					"id": "460000000000",
					"title": "海南省",
					"pinyin": "HN",
					"lat": "20.017377",
					"lng": "110.349228"
				},
				{
					"id": "610000000000",
					"title": "陕西省",
					"pinyin": "SX",
					"lat": "34.265472",
					"lng": "108.954239"
				},
				{
					"id": "120000000000",
					"title": "天津市",
					"pinyin": "TJ",
					"lat": "39.084158",
					"lng": "117.200983"
				},
				{
					"id": "410000000000",
					"title": "河南省",
					"pinyin": "HN",
					"lat": "34.765515",
					"lng": "113.753602"
				},
				{
					"id": "130000000000",
					"title": "河北省",
					"pinyin": "HB",
					"lat": "38.037057",
					"lng": "114.468664"
				},
				{
					"id": "650000000000",
					"title": "新疆维吾尔自治区",
					"pinyin": "XJ",
					"lat": "43.793026",
					"lng": "87.627704"
				},
				{
					"id": "714401",
					"title": "台湾省",
					"pinyin": "",
					"lat": "",
					"lng": ""
				},
				{
					"id": "810000000000",
					"title": "香港特别行政区",
					"pinyin": "",
					"lat": "",
					"lng": ""
				},
				{
					"id": "820000000000",
					"title": "澳门特别行政区",
					"pinyin": "",
					"lat": "",
					"lng": ""
				},
				{
					"id": "370000000000",
					"title": "山东省",
					"pinyin": "SD",
					"lat": "36.668530",
					"lng": "117.020359"
				},
				{
					"id": "310000000000",
					"title": "上海市",
					"pinyin": "SH",
					"lat": "31.230416",
					"lng": "121.473701"
				},
				{
					"id": "320000000000",
					"title": "江苏省",
					"pinyin": "JS",
					"lat": "32.061707",
					"lng": "118.763232"
				},
				{
					"id": "140000000000",
					"title": "山西省",
					"pinyin": "SX",
					"lat": "37.873531",
					"lng": "112.562398"
				},
				{
					"id": "110000000000",
					"title": "北京市",
					"pinyin": "BJ",
					"lat": "39.904030",
					"lng": "116.407526"
				},
				{
					"id": "220000000000",
					"title": "吉林省",
					"pinyin": "JL",
					"lat": "43.896536",
					"lng": "125.325990"
				},
				{
					"id": "630000000000",
					"title": "青海省",
					"pinyin": "QH",
					"lat": "36.620901",
					"lng": "101.780199"
				},
				{
					"id": "640000000000",
					"title": "宁夏回族自治区",
					"pinyin": "NX",
					"lat": "38.471317",
					"lng": "106.258754"
				},
				{
					"id": "150000000000",
					"title": "内蒙古自治区",
					"pinyin": "NMG",
					"lat": "40.817498",
					"lng": "111.765617"
				},
				{
					"id": "620000000000",
					"title": "甘肃省",
					"pinyin": "GS",
					"lat": "36.059421",
					"lng": "103.826308"
				},
				{
					"id": "340000000000",
					"title": "安徽省",
					"pinyin": "AH",
					"lat": "31.861184",
					"lng": "117.284922"
				},
				{
					"id": "210000000000",
					"title": "辽宁省",
					"pinyin": "LN",
					"lat": "41.835441",
					"lng": "123.429440"
				},
				{
					"id": "360000000000",
					"title": "江西省",
					"pinyin": "JX",
					"lat": "28.675696",
					"lng": "115.909228"
				},
				{
					"id": "330000000000",
					"title": "浙江省",
					"pinyin": "ZJ",
					"lat": "30.267446",
					"lng": "120.152791"
				},
				{
					"id": "430000000000",
					"title": "湖南省",
					"pinyin": "HN",
					"lat": "28.112444",
					"lng": "112.983810"
				},
				{
					"id": "350000000000",
					"title": "福建省",
					"pinyin": "FJ",
					"lat": "26.100779",
					"lng": "119.295144"
				},
				{
					"id": "440000000000",
					"title": "广东省",
					"pinyin": "GD",
					"lat": "23.132191",
					"lng": "113.266530"
				},
				{
					"id": "450000000000",
					"title": "广西壮族自治区",
					"pinyin": "GX",
					"lat": "22.815478",
					"lng": "108.327546"
				},
				{
					"id": "420000000000",
					"title": "湖北省",
					"pinyin": "HB",
					"lat": "30.546498",
					"lng": "114.341861"
				},
				{
					"id": "230000000000",
					"title": "黑龙江省",
					"pinyin": "HLJ",
					"lat": "45.742347",
					"lng": "126.661669"
				}
			]
			this.pinyinArr = this.data_letter_sort(arr, "pinyin");
			// }
			// });
		},
		data_letter_sort(data, field) {
			var letter_reg = /^[A-Z]$/;
			var list = new Array();
			// 添加 # 分组，用来 存放 首字母不能 转为 大写英文的 数据
			list["#"] = new Array();
			for (var i = 0; i < data.length; i++) {
				// 首字母 转 大写英文
				var letter = data[i][field].substr(0, 1).toUpperCase();
				// 是否 大写 英文 字母
				if (!letter_reg.test(letter)) {
					letter = "#";
				}
				// 创建 字母 分组
				if (!(letter in list)) {
					list[letter] = new Array();
				}
				// 字母 分组 添加 数据
				list[letter].push(data[i]);
			}
			// 转换 格式 进行 排序；
			var resault = new Array();
			for (var key in list) {
				resault.push({
					letter: key,
					list: list[key],
				});
			}
			resault.sort(function (x, y) {
				return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
			});
			// # 号分组 放最后
			var last_arr = resault[0];
			resault.splice(0, 1);
			resault.push(last_arr);
			return resault;
		},
	},
};
</script>

<style lang="scss" scoped>
.address_choose {
	width: auto;
	height: 1000rpx;
	padding: 30rpx;
	@include flex-center(column, center, flex-start);

	.choose_top {
		width: 100%;
		padding-bottom: 30rpx;
		@include flex-center(row, space-between, center);

		>text {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}
	}

	.choose_body {
		width: 100%;
		flex: 1;
		overflow: auto;
	}

	.add_top {
		width: 100%;
		height: auto;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
		line-height: 1;
		font-size: 28rpx;
		border-bottom: 2rpx solid #eeeeee;

		.add_top_title {
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;

			>view:nth-of-type(1) {
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				background-color: #ff5c2b;
				margin-right: 46rpx;
				position: relative;

				>b {
					position: absolute;
					width: 4rpx;
					height: 80rpx;
					top: 0;
					left: 7rpx;
					background-color: #ff5c2b;
				}
			}

			>view:nth-of-type(2) {
				font-size: 28rpx;
				color: #ff5c2b;
			}
		}
	}

	.add_sel {
		width: 100%;
		flex: 1;
		overflow: auto;

		.add_sel_p {
			font-size: 28rpx;
			color: #a2a2a2;
			line-height: 76rpx;
		}

		.add_sel_box {
			width: 100%;
			display: flex;
			flex-flow: column;
			justify-content: flex-start;
			align-items: flex-start;

			.add_sel_box_item {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: flex-start;
				font-size: 28rpx;
				margin-bottom: 20rpx;

				>view:nth-of-type(1) {
					width: 24rpx;
					font-size: 32rpx;
					color: #7c7c7c;
					margin-right: 40rpx;
					padding-top: 10rpx;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					line-height: 72rpx;
				}
			}
		}
	}
}

.address_pop_body {
	width: 100%;
	height: 60vh;
	box-sizing: border-box;
}
</style>